<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <!-- 
        超链接可以让我们从一个页面跳转到其他页面
            或者是当前页面的其他的位置

        使用 a 标签来定义超链接
            属性:
                href 指定跳转的目标路径
        超链接也是一个行内元素，在 a 标签中可以嵌套除它自身外的任何元素

        ./当前目录
        ../上一级目录

        target属性，用来指定超链接打开的位置
            可选值:
                _self 默认值 在当前页面中打开超链接
                _blank 在一个新的页面中打开超链接
    -->
    <a href="https://www.baidu.com">外部超链接</a>
    <br>
    <a href="./05.列表.html">内部超链接</a>
    <br>
    <a href="https://XXX.com//xxx" target="_blank">新页面打开超链接</a>  
    <br>
    <a href="javascript:;">这个超链接什么也不会发生</a>
    <br>
    <a id="top" href="#bottom">回到底部</a>
    <br>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta repellat beatae tenetur ipsa consequuntur quia, impedit in nemo nisi ducimus magni consequatur quo labore ex excepturi aspernatur. Neque, dolore mollitia.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta repellat beatae tenetur ipsa consequuntur quia, impedit in nemo nisi ducimus magni consequatur quo labore ex excepturi aspernatur. Neque, dolore mollitia.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta repellat beatae tenetur ipsa consequuntur quia, impedit in nemo nisi ducimus magni consequatur quo labore ex excepturi aspernatur. Neque, dolore mollitia.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta repellat beatae tenetur ipsa consequuntur quia, impedit in nemo nisi ducimus magni consequatur quo labore ex excepturi aspernatur. Neque, dolore mollitia.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta repellat beatae tenetur ipsa consequuntur quia, impedit in nemo nisi ducimus magni consequatur quo labore ex excepturi aspernatur. Neque, dolore mollitia.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta repellat beatae tenetur ipsa consequuntur quia, impedit in nemo nisi ducimus magni consequatur quo labore ex excepturi aspernatur. Neque, dolore mollitia.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta repellat beatae tenetur ipsa consequuntur quia, impedit in nemo nisi ducimus magni consequatur quo labore ex excepturi aspernatur. Neque, dolore mollitia.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta repellat beatae tenetur ipsa consequuntur quia, impedit in nemo nisi ducimus magni consequatur quo labore ex excepturi aspernatur. Neque, dolore mollitia.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta repellat beatae tenetur ipsa consequuntur quia, impedit in nemo nisi ducimus magni consequatur quo labore ex excepturi aspernatur. Neque, dolore mollitia.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta repellat beatae tenetur ipsa consequuntur quia, impedit in nemo nisi ducimus magni consequatur quo labore ex excepturi aspernatur. Neque, dolore mollitia.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta repellat beatae tenetur ipsa consequuntur quia, impedit in nemo nisi ducimus magni consequatur quo labore ex excepturi aspernatur. Neque, dolore mollitia.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta repellat beatae tenetur ipsa consequuntur quia, impedit in nemo nisi ducimus magni consequatur quo labore ex excepturi aspernatur. Neque, dolore mollitia.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta repellat beatae tenetur ipsa consequuntur quia, impedit in nemo nisi ducimus magni consequatur quo labore ex excepturi aspernatur. Neque, dolore mollitia.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta repellat beatae tenetur ipsa consequuntur quia, impedit in nemo nisi ducimus magni consequatur quo labore ex excepturi aspernatur. Neque, dolore mollitia.</p>
    <a id="bottom" href="#">回到顶部</a>
</body>
</html>